<template>
  <div>
  <div id="id1" >
<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: 'Welcome' }">主页</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: 'Examine' }">待审核备货计划列表</el-breadcrumb-item>
</el-breadcrumb>
  </div>
  <div id="main1" style="margin:1px">
  经销商编码：
  <el-input placeholder="请输入" v-model="select.dno" clearable style="height:20px;width:200px;"></el-input>
  订单编号：
  <el-input placeholder="请输入" v-model="select.orderno" clearable style="height:40px;width:200px;"></el-input>

  <br>
  <br>
  经销商名称：
  <el-input placeholder="请输入" v-model="select.dname" clearable style="height:40px;width:200px;"></el-input>
  订单日期：
  <el-date-picker
      v-model="select.subdatefrom"
      type="datetime"
      placeholder="选择日期时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      default-time="12:00:00">
    </el-date-picker>
  至
  <el-date-picker
      v-model="select.subdateto"
      type="datetime"
      placeholder="选择日期时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      default-time="12:00:00">
    </el-date-picker>   

   <el-button @click="load" type="info" icon="el-icon-search" plain style="float:right;">查询</el-button>
</div>

  <div id="id1">
    <el-button  type="info" icon="el-icon-zoom-in" plain ><b>审核</b></el-button>
  </div>

  <div id="main2">
    <div id="id">
    <el-table :data="stocks" border size="mini" >
      <el-table-column type="selection"></el-table-column>
      <!-- 添加序号 -->
      <el-table-column prop="sno" label="序号" align="center" type="index"></el-table-column>
      <!-- 渲染后端数据 -->
      <el-table-column prop="subDate" label="提交备货计划日期" align="center" width="96"></el-table-column>
      <el-table-column prop="orderno" label="备货计划订单编号" align="center"></el-table-column>
      <el-table-column prop="dno" label="经销商编码" align="center"></el-table-column>
      <el-table-column prop="area" label="区域" align="center"></el-table-column>
      <el-table-column prop="pno" label="产品编码" align="center"></el-table-column>
      <el-table-column prop="pmodel" label="产品型号"  align="center"></el-table-column>
      <el-table-column prop="category" label="品类" align="center"></el-table-column>
      <el-table-column prop="tnum" label="总数量" align="center"></el-table-column>
      <el-table-column prop="singlePrice" label="开票价格" align="center"></el-table-column>
      <el-table-column prop="tmoney" label="总金额" align="center"></el-table-column>
      <el-table-column prop="tvolume" label="总体积（m³）" align="center"></el-table-column>
      
      <el-table-column label="操作" width="200" align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="detial(scope.row)">查看详情
        </el-button>
        <el-button
          size="mini"
          @click="examine(scope.row)">审核
        </el-button>
      </template>
    </el-table-column>
    </el-table>
    </div>
    <div id="id2">
    <div style="float:right;">小计：<span style="color:red">订单金额:{{totalPrice1}}元</span> 体积:{{totalVolume1}}m³</div>
    </div>
    <div id="id3" class="block">
      <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total=this.total>
    </el-pagination>
    </div>
   </div>

  <div id="id1">
    <div style="float:left;"><B>汇总信息</B></div>
    <div style="float:right;"><span style="color:red">订单金额:{{totalPrice2}}元 </span>体积:{{totalVolume2}}m³</div>
  </div>
    <!-- 查看详情 -->
  <div >
      <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="70%"
      >
        <el-descriptions class="margin-top"  :column="2" :size="size" border
        >
          
          <el-descriptions-item label="提交备货计划日期">
            {{this.stock.subDate}}
          </el-descriptions-item>
          <el-descriptions-item label="备货计划需求时间段">
            {{this.stock.period}}
          </el-descriptions-item>
          <el-descriptions-item label="区域">
            {{this.stock.area}}
          </el-descriptions-item>
          <el-descriptions-item label="收货仓库" v-if="this.stock.products">
            {{this.stock.products[0].inWarehouse}}
          </el-descriptions-item>
          <el-descriptions-item label="订单编号">
            {{this.stock.orderno}}
          </el-descriptions-item>
          <el-descriptions-item label="省份" v-if="this.stock.dealers">
            {{this.stock.dealers[0].provinces}}
          </el-descriptions-item>
          <el-descriptions-item label="申请人">
            {{this.stock.applicant}}
          </el-descriptions-item>
          <el-descriptions-item label="市区" v-if="this.stock.dealers">
            {{this.stock.dealers[0].city}}
          </el-descriptions-item>
          <el-descriptions-item label="经销商编码">
            {{this.stock.dno}}
          </el-descriptions-item>
          <el-descriptions-item label="收货人" v-if="this.stock.dealers">
            {{this.stock.dealers[0].consignee}}
          </el-descriptions-item>
          <el-descriptions-item label="经销商名称" v-if="this.stock.dealers">
            {{this.stock.dealers[0].dname}}
          </el-descriptions-item>
          <el-descriptions-item label="电话" v-if="this.stock.dealers">
            {{this.stock.dealers[0].tel}}
          </el-descriptions-item>
          <el-descriptions-item label="店铺名称" v-if="this.stock.dealers">
            {{this.stock.dealers[0].dinfo}}
          </el-descriptions-item>
          <el-descriptions-item label="详细送货地址" v-if="this.stock.dealers">
            {{this.stock.dealers[0].address}}
          </el-descriptions-item>
          <el-descriptions-item label="总数量">
            {{this.stock.tnum}}
          </el-descriptions-item>
          <el-descriptions-item label="出货仓库" v-if="this.stock.products">
            {{this.stock.products[0].outWarehouse}}
          </el-descriptions-item>
          <el-descriptions-item label="总金额" >
            {{this.stock.tmoney}}
          </el-descriptions-item>
          <el-descriptions-item label="需缴纳备货保证金">
            {{this.stock.needMoney}}
          </el-descriptions-item>
          <el-descriptions-item label="总体积">
            {{this.stock.tvolume}}
          </el-descriptions-item>
          <el-descriptions-item label="已缴纳备货保证金">
            {{this.stock.alreadyMoney}}
          </el-descriptions-item>
        </el-descriptions>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
  <div>
    <el-dialog
      title="审核"
      :visible.sync="dialogVisible2"
      width="30%"
      >
      <span>是否通过审核？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="unpass">不通过</el-button>
        <el-button type="primary" @click="pass">通过</el-button>
      </span>
    </el-dialog>
  </div>
  </div>
  
</template>


<script>
export default {
    name:"Stock",
    props:['user'],
    data(){
        return{
            currentPage:1,
            pageSize:5,
            expurl:"",
            dialogVisible:false,
            dialogVisible2:false,
            totalPrice1:0,
            totalPrice2:0,
            totalVolume1:0,
            totalVolume2:0,
            size: '',
            
            //返回后端的信息
            user:{},
            stocks:{
            
            },
            select:{

            },
            stock:{
              
            },
            products:[]
        };
    },
    mounted(){
        this.load()
        this.tol()
    },
   
    methods:{
      load(){
        this.$Ajax.get("getAllStockInfo",{
          params:{
            page: this.currentPage,
            rows:this.pageSize,
            dno:this.select.dno,
            orderno:this.select.orderno,
            dname:this.select.dname,
            dstate:"未审核",
            area:this.select.area,
            subdatefrom:this.select.subdatefrom,
            subdateto:this.select.subdateto,
          }
        }).then(result=>{
          console.log(result);
          this.stocks=result.data.rows,
          this.total = result.data.total
          this.totalPrice1 = 0
          this.totalVolume1 = 0
          this.stocks.forEach(stock =>{
            this.totalPrice1 = this.totalPrice1 + stock.tmoney
          })
          this.stocks.forEach(stock =>{
            this.totalVolume1 = this.totalVolume1 + stock.tvolume
          })
        })
      },
      tol(){
        this.$Ajax.get("getAllStockInfo",{
          params:{
            rows:1000,
            page:1,
            dstate:"未审核",
          }
        }).then(result=>{
          console.log(result);
          this.stocks2 = result.data.rows,
          this.stocks2.forEach(stock2 =>{
            this.totalPrice2 = this.totalPrice2 + stock2.tmoney
          })
          this.stocks2.forEach(stock2 =>{
            this.totalVolume2 = this.totalVolume2 + stock2.tvolume
          })
        })
      },
      detial(stock){
        this.stock = stock
        this.dialogVisible = true
        console.log(stock);
      },
      examine(stock){
        this.stock = stock
        let user = JSON.parse(sessionStorage.getItem("user"))
        this.stock.trial = user.userName
        console.log(user.userName);
        this.dialogVisible2 = true
      },
      pass(){
        this.$Ajax.post("approvedBysno",this.stock).then((result) =>{
          if(result.data.flag == true){
            this.$message({
              type:"success",
               message:result.data.message
            })
          }else{
            this.$message({
              type:"error",
              message:result.data.message
            })
          }
          this.load()
          this.dialogVisible2 = false
        })
      },
      unpass(){
        this.$Ajax.post("rejectedBysno",this.stock).then((result) =>{
          if(result.data.flag == true){
            this.$message({
              type:"success",
               message:result.data.message
            })
          }else{
            this.$message({
              type:"error",
              message:result.data.message
            })
          }
          this.load()
          this.dialogVisible2 = false
        })
      },
      handleCurrentChange(pagenum) {
        console.log(`当前页: ${pagenum}`);
        this.currentPage = pagenum
        this.load()
      },


    },

};
</script>

<style>
 #id1 {
    background-color: #B3C0D1;
    color: #333;
    text-align: left;
    line-height: 40px;
    height: 45px;
  }
  
  #main1 {
    background-color:#f3f5f8;
    color: #333;
    text-align: left;
    line-height: 25px;
    height: 130px;
  }

  #main2{
    background-color:#D3DCE6;
    color: #333;
    text-align: center;
    height: 410px;
  }
  #id{
    background-color:#D3DCE6;
    color: #333;
    text-align: center;
    height: 360px;
  }
   #id2 {

    background-color: #f3f5f8;
    color: #333;
    font-size: 15px;
    text-align: right;;
    height: 20px;
  }
   #id3 {

    background-color: #E9EEF3;
    color: #333;
    text-align: right;;
    height: 30px;
  }
  /* 设置表格边框颜色 */
.el-table--border,
.el-table--group {
  border: 1px solid rgb(6, 6, 6) !important;
}

/* 设置表格内竖线颜色 */
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid black !important;
}

/* 设置表格内行线颜色 */
.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid black !important;
}

/* 设置表头边框颜色 */
.el-table thead tr th {
  border-color: rgb(153, 21, 173);
}

/* 设置鼠标悬停时的样式 */
.el-table tbody tr:hover > td {
  cursor: pointer;
  background-color: transparent !important;
}

/* 设置表头列与内容对齐样式 */
body .el-table th.gutter {
  display: table-cell !important;
}
</style>
